<template>
  <view class="search">
    <!-- 搜索组件 -->
    <u-search
      placeholder="输入商品名"
      v-model="keyword"
      :action-style="{
        backgroundColor: '#ea4350',
        color: '#fff',
        height: '64rpx',
        lineHeight: '64rpx',
        borderRadius: '10rpx',
      }"
      @custom="handleSearch"
      @change="handleInputChange"
    ></u-search>
    <!-- 列表显示  -->
    <view class="search_list u-m-t-10">
        <!-- 点击可以跳转到商品详情页面 -->
        <navigator :url="`/pages/goods_list/goods_list?query=${item.goods_name}`" v-for="item in goodsKeyword" :key="item.goods_id">
          {{item.goods_name}}
        </navigator>
    </view>
   
  </view>
</template>

<script>
export default {
    data(){
        return{
            // 与搜索框双向绑定的数据(获取输入框的数据)
            keyword:'',
            // 商品关键字列表
            goodsKeyword:'',
        }
    },
    
    methods:{
        // 搜索框的值改变 事件
        handleInputChange(){
            // 根据关键字来搜索商品
            // console.log(this.keyword);
            // this.goodsQsearch(this.keyword)
            // 优化：防抖 -- 利用uview提供的防抖技术
            // this.$u.debounce(this.goodsQsearch,500);// 没有传递参数 不可行
            // this.$u.debounce是一个函数，他所接收的第一个参数也需要是函数

            // 解决方式一  用一个匿名函数来做参数，在里面调用要处理的事件
            // this.$u.debounce(()=>{
            //   this.goodsQsearch(this.keyword)
            // },500)

            // 解决方式二  bind  (理解)
            // bind 修改this指向的同时，会返回一个函数  传递返回的函数需要用到的参数
            // 这里只是想要 返回一个 接收参数的函数 不是用它修改this指向的功能
            this.$u.debounce(this.goodsQsearch.bind(this, this.keyword), 500);
        },

        // 第一种方式 --- 在seaech1.vue里面
        // 第二种方式 --- 搜索出现关键词 -点击关键词，就以关键词为参数跳转到相应的商品页面
       async goodsQsearch(query){
        // 判断：如果 输入框的值为空 !query 则不发送请求
        if(!query){
          return
        }
        // 发送请求
          const result = await this.$u.get('/goods/qsearch', {query})
          console.log(result);
          this.goodsKeyword = result.message;
        },

        // 点击搜索按钮
        handleSearch(){
          // 将携带参数 跳转到商品列表页面 --- 参数为输入框的值  keyword
          uni.navigateTo({
            url:`/pages/goods_list/goods_list?query=${this.keyword}`,
          })
        }
    }
}
</script>

<style lang="scss">
.search {
  padding: 15rpx;
}
.search_list {
  navigator {
    display: flex;
    .goods-img-wrap {
      flex: 1;
      padding: 15rpx;
    }
    .goods-info-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
    font-size: 28rpx;
    padding: 20rpx;
  }
}
</style>